<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>H+ 后台主题UI框架 - 数据表格</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link rel="shortcut icon" href="${ctx}/favicon.ico">
<link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">

<!-- Data Tables -->
<link href="${ctx}/css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">

<link href="${ctx}/css/animate.css" rel="stylesheet">
<link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
<!-- 全局jquery与bootstrap -->
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
<!-- 引入分页插件  -->
<script src="${ctx}/js/bootstrap-paginator.js"></script>



<script src="${ctx}/js/plugins/jeditable/jquery.jeditable.js"></script>

<!-- 日历Data Tables表格 -->
<script src="${ctx}/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="${ctx}/js/plugins/dataTables/dataTables.bootstrap.js"></script>


<!-- 引入弹框插件 layer  -->
<script src="${ctx}/js/plugins/layer/layer.min.js"></script>

    <!-- 引入 Jquery.validate.js 表单验证框架 -->
	<script src="${ctx}/js/jquery.validate.min.js"></script>
	<script src="${ctx}/js/messages_zh.min.js"></script>
	
<!-- 自定义js -->
<script src="${ctx}/js/content.js?v=1.0.0"></script>

<script type="text/javascript">
$(function(){
	//下拉列表
	$("#pageSize").change(function(){
		console.log($("#search").val());
		window.location.href="${ctx}/task.oas?cmd=selectTask&currentPage=1&pageSize="
			+this.value+"&keyWord="+$("#search").val();
	})
	
	//监听搜搜框的键盘按下事件:如果用户按的是回车键,就触发向后台发送请求的操作
	$("#search").keyup(function(event){
		//event是js事件编程种的一个内置对象,可以获取当前用户按下键盘任意键的所有信息
		//键盘的每一个数字都是对应的ASCII码,13是Enter 键盘
		if(event.keyCode == 13){
			window.location.href="${ctx}/task.oas?cmd=selectTask&keyWord="+$("#search").val();
		}
	});
	
	var pageSize = ${pageResult.pageSize};
	$("#pagination").bootstrapPaginator({
		currentPage : ${pageResult.currentPage},//当前页
		totalPages : ${pageResult.totalPage},//总页数
		size : "normal",
		bootstrapMajorVersion : 3,
		alignment : "right",
		numberOfPages : 6,//显示的按钮数
        itemTexts: function (type, page, current) {
            switch (type) {
                case "first": return "首页";
                case "prev": return "上一页";
                case "next": return "下一页";
                case "last": return "末页";
                case "page":return page;
            }
        },//改写分页按钮字样
        onPageClicked: function (event, originalEvent, type, page) {
        	window.location.href="${ctx}/task.oas?cmd=selectTask&currentPage="
				+page+"&pageSize="+pageSize+"&keyWord="+$("#search").val();
        	//pageSize为查询对象的pageSize
        	//keyWord为输入框回写后的值
        	//查询中有三个参数 currentPage,pageSize,keyWord
        },
        //指针放上去变小手
        itemContainerClass: function(type, page, current){
        	return (current==page) ? "active" : "pointer-cursor";
        	}
    });
})



function checkTrans(element){
	//从传过来的element对象中获取值
	var title = $(element).data("title");
	var content = $(element).data("content");
	var delayclerk = $(element).data("delayclerk");
	var applytime = $(element).data("applytime");
	var transreason = $(element).data("transreason");
	//将数值格式的状态变成字符
	var transstatus = $(element).data("transstatus")==1?"同意"
			:$(element).data("transstatus")==0?"审核中":"不同意";
	var replyman = $(element).data("replyman");
	var replytime = $(element).data("replytime");
	var acceptor = $(element).data("acceptor");
	var transopinion = $(element).data("transopinion");
	
	
	//将值赋给td
	 $("#title")[0].innerHTML=title;
	$("#content")[0].innerHTML=content;
	$("#delayclerk")[0].innerHTML=delayclerk;
	$("#applytime")[0].innerHTML=applytime;
	$("#transreason")[0].innerHTML=transreason;
	$("#transstatus")[0].innerHTML= transstatus;
	$("#replyman")[0].innerHTML=replyman;
	$("#replytime")[0].innerHTML=replytime;
	$("#acceptor")[0].innerHTML=acceptor;
	$("#transopinion")[0].innerHTML=transopinion;

	//为审核状态行设置class样式，1为成功设置成success，0为审核中设置成warning，2为审核不通过设置成danger
	var status = $(element).data("transstatus")==1?"success":$(element).data("transstatus")==0?"warning":"danger";
	$("#tableStatus").prop("class",status);
}

 function changeTrans(element) {
		//从传过来的element对象中获取值
		var chtitle = $(element).data("chtitle");
		var chcontent = $(element).data("chcontent");
		var churgent = $(element).data("churgent")==0?"一般":$(element).data("churgent")==1?"紧急":"重大";
		//将数值格式的状态变成字符
		var chtime = $(element).data("chtime");
		
		//将值赋给td
		 $("#chtitle").val(chtitle);
		$("#chcontent").val(chcontent);
		$("#churgent").val(churgent);
		$("#chtime").val(chtime);

		//为审核状态行设置class样式，1为成功设置成success，0为审核中设置成warning，2为审核不通过设置成danger
		var status = $(element).data("churgent")==0?"DarkGreen":$(element).data("churgent")==1?"MediumVioletRed ":"Red";
		$("#churgent ").css("color",status);
}



function deleteTrans(element,title) {
	layer.confirm('亲,确定要删除此任务吗',{icon: 4, title:'提示'}, function(index){
		
		$.post("${ctx}/task.oas?cmd=deleteTask",{title:title},function(data){
			
			if(data.state == 1){//删除成功
				
				var tr =  $(element).parent().parent();
				tr.remove();
				
				layer.alert(data.msg,{
						title:'成功',
						icon:1,
					  skin: 'layer-ext-moon' //样式类名
				});
				
				//获取总数 -1 
				var totalCount  = $("#totalCount").text();
				$("#totalCount").text(parseInt(totalCount)-1);

				if(parseInt(totalPage) % ${pageResult.pageSize}){
					var totalPage = $("#totalPage").text();
					$("#totalPage").text(parseInt(totalPage)-1);
				}
				//思考任务:考虑当前页数据删除完毕以后应该怎么处理
			}else{//删除失败
				layer.alert(data.msg,{
					title:'失败',
					icon:2,
					  skin: 'layui-layer-molv' //样式类名
				});
			}
			 layer.close(index);//关闭当前窗口
		});
	});
}
$(function(){
	 $.validator.addMethod("verifyMan", function(value, element, param) {
			var pattern = /^[\u4e00-\u9fa5]{1,5}$/;
			return pattern.test(value);
		});
	 //一个数字
	 $.validator.addMethod("verifyNum", function(value, element, param) {
			var pattern = /^[0-9]{1}$/;
			return pattern.test(value);
		});
	 
	//使用jquery.validate 进行表单校验
	$("#changeForm").validate(
			{
				rules : {
					chclerk :{
							required : true,
							verifyMan:true
						},
						chreason : "required",
					chstatus :"verifyNum",
					chacceptor : "verifyMan",
					chopinion : "required",
					},
				
				messages : {
					chclerk :{
						required : "申请人不能为空",
						checkApplyMan:"名字为汉字"
					},
					chreason : "原因不能为空",
					chstatus :"请选择是否同意",
					chacceptor : "转交对象不能为空",
					chopinion : "详细不能为空"
				},
				
				submitHandler : function() {
					var formData = $("#changeForm").serialize();
					$.post("${ctx}/task.oas?cmd=changeTask", formData,
							function(data) {
								if (data.state == 1) {
									//使用layer插件进行弹框提示
									//墨绿深蓝风
									layer.alert(data.msg, {
									  skin: 'layui-layer-molv' //样式类名
									  ,closeBtn: 0
									}, function(index){
										layer.close(index);
										$("#changeForm")[0].reset();
										window.location.href="${ctx}/task.oas?cmd=selectTask";
									});

								} else {
									layer.alert(data.msg, {
										  skin: 'layui-layer-molv' //样式类名
									});
								}
							});
					
				}
			});
	
})


</script>
</head>

<body class="gray-bg" >
	<div class="col-sm-12" style="font-size: 16px;">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h2 style="color: DarkGreen;font-family: Microsoft YaHei;">任务审核</h2>
			</div>
			
			<div class="ibox-content" >
				<div id="DataTables_Table_0_wrapper"
					class="dataTables_wrapper form-inline" role="grid">
					<div class="row">
					<div class="col-sm-6">
							<div class="dataTables_length" id="DataTables_Table_0_length">
								<label>每页 
								<select id="pageSize"  class="form-control input-sm">
								<!-- El表达式取出值并与数值比较 -->
										<option value="10" ${pageResult.pageSize eq 10 ? 'selected':''}>10</option>
										<option value="25" ${pageResult.pageSize eq 25 ? 'selected':''}>25</option>
										<option value="50" ${pageResult.pageSize eq 50 ? 'selected':''}>50</option>
										<option value="100" ${pageResult.pageSize eq 100 ? 'selected':''}>100</option></select> 条记录
								</label>
							</div>
						</div>
					<div class="col-sm-6">
							<div id="DataTables_Table_0_filter" class="dataTables_filter">
								<label>查找：<input class="form-control input-sm"
									placeholder="请输入标题或申请人"
									id="search" type="search" value="${keyWord}" ></label>
							</div>
					</div>
					</div>
					
					<table
						class="table table-striped table-bordered table-hover dataTables-example dataTable"
						id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
						<thead>
							<tr role="row" >
							<th class="sorting_asc" tabindex="0" >项目名称</th>
								<th class="sorting_asc" tabindex="0" >申请人&nbsp;</th>
								<th class="sorting_asc" tabindex="0" >申请原因</th>
								<th class="sorting_asc" tabindex="0" >审核状态</th>
								<th class="sorting_asc" tabindex="0" >审核时间</th>
								<th class="sorting_asc" tabindex="0" >审核人&nbsp;</th>
								<th class="sorting_asc" tabindex="0" >操作</th>
							</tr>
						</thead>
						<tbody>
						
						<!-- forEach循环 -->
						<c:forEach items="${pageResult.dataList}" var="trans">
						<tr class="gradeA odd" style="font: SimSun">
						<td>${trans.title}</td><!-- 申请人 -->
						<td>${trans.delayclerk}</td><!-- 申请人 -->
						<td>${trans.transreason}</td><!-- 申请原因 -->
						<td  
						>${trans.transstatus==1? '审核通过':trans.transstatus==0?'审核中':'审核不通过'}</td> <!-- El表达式中三目运算 -->
						<td>${trans.replytime}</td><!-- 审核时间 -->
						<td>${trans.replyman}</td><!-- 审核人 -->
						<td>
						
						<!-- 查看按钮 -->
					   <a  onclick="checkTrans(this)"   data-toggle="modal" class="btn btn-info"  href="form_basic.html#modal-checkform" 
					   data-title="${trans.title}"
					    data-content="${trans.content}"
					    data-delayclerk="${trans.delayclerk}"
					    data-applytime="${trans.applytime}"
					    data-transreason="${trans.transreason}"
					    data-transstatus="${trans.transstatus}"
					    data-replyman="${trans.replyman}"
					    data-replytime="${trans.replytime}"
					    data-transopinion="${trans.transopinion}"
					    data-acceptor="${trans.acceptor}"
					   >&nbsp;查&nbsp;&nbsp;看&nbsp;</a>
					   
					 	<!-- 修改按钮 -->
					   <a  onclick="changeTrans(this)"   data-toggle="modal" class="btn btn-warning"  href="form_basic.html#modal-changeform" 
					   data-chtitle="${trans.title}"
					    data-chcontent="${trans.content}"
					    data-chtime="${trans.transfintime}"
					    data-churgent="${trans.urgent}"
					   >&nbsp;审&nbsp;&nbsp;核&nbsp;</a>
						<option class="btn btn-danger" onclick="deleteTrans(this,'${trans.title}')">&nbsp;删&nbsp;&nbsp;除&nbsp;</option><!-- 删除按钮 -->
						</td>
						</tr>
						</c:forEach>
						</tbody>
					</table>
			
				<div class="row">
						<div class="col-sm-4">
							<div class="dataTables_info" >
							第${pageResult.currentPage}页 共${pageResult.totalPage}页 总计<span id="totalCount">${pageResult.totalCount}</span>条数据<!-- El表达式取值 -->
						</div>
								</div>
							<div class="col-sm-6">
							<div class="dataTables_paginate paging_simple_numbers"
								id="DataTables_Table_0_paginate">
								<ul  id="pagination"></ul>
							</div>
						</div>
				</div>
			</div>
		</div>
	</div>
	


<!-- Model弹框查看 -->
	<div id="modal-checkform" class="modal fade" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<div class="row">
						<div class="col-sm-12 ">
							<h2 class=" m-b" style="color: green;font-family:Microsoft YaHei ">任务查看</h2>
								
								<table class="table table-striped  table-hover" 
								id="transTable" style="font-size: 15px;font-weight: 600">
								<tr class="success">
								<td >任务标题：&nbsp;</td>
								<td  id="title"></td>
								</tr>
								<tr >
								<td>任务内容</td>
								<td id="content"></td>
								</tr>
								<tr class="info">
								<td>申请人</td>
								<td id="delayclerk"></td>
								</tr>
								<tr >
								<td>申请时间</td>
								<td id="applytime"></td>
								</tr>
								<tr class="warning">
								<td>转移原因</td>
								<td id="transreason"></td>
								</tr>
								<tr >
								<td>转接对象</td>
								<td id="acceptor"></td>
								</tr>
								<tr id="tableStatus">
								<td>是否同意</td>
								<td id="transstatus"></td>
								</tr>
								<tr >
								<td>审核人</td>
								<td id="replyman"></td>
								</tr>
								<tr class="info">
								<td>审核时间</td>
								<td id="replytime"></td>
								</tr>
								<tr class="warning" >
								<td >详细意见</td>
								<td id="transopinion"></td>
								</tr>
								</table>
								
								<div>
									<button class="btn  btn-primary pull-right "
										type="button" data-dismiss="modal">
										<strong>&nbsp;&nbsp;关&nbsp;&nbsp;闭&nbsp;&nbsp;</strong>
									</button>
								</div>
							</form>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</div>


	<!-- Model弹框修改 -->
	<div id="modal-changeform" class="modal fade" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<div class="row">
						<div class="col-sm-12 ">
							<h2 class=" m-b" style="color: SaddleBrown;font-family:Microsoft YaHei ">任务修改</h2>
								
								
								
						<div class="ibox-content">
						<form class="form-horizontal" action="" method="post" id="changeForm">
						
						
							<div class="form-group" >
								<label class="col-sm-3 control-label">任务标题</label>
								<div class="col-sm-7">
									<input id="chtitle" type="text" name="chtitle" 
										class="form-control"  style="border: none;" readonly="readonly">
								</div>
							</div>
							
								
							<div class="form-group">
								<label class="col-sm-3 control-label">任务内容</label>
								<div class="col-sm-7">
									<input type="text" id="chcontent" name="chcontent" 
										class="form-control"  style="border: none;" readonly="readonly">
								</div>
							</div>
							
							
								<div class="form-group">
								<label class="col-sm-3 control-label">紧急程度</label>
								<div class="col-sm-7">
									<input type="text" id="churgent" name="churgent" 
										class="form-control"  style="border: none;font-weight: 600" readonly="readonly">
								</div>
							</div>
							
								<div class="form-group">
								<label class="col-sm-3 control-label">截止时间</label>
								<div class="col-sm-7">
									<input type="text" id="chtime" name="chtime" 
										class="form-control"  style="border: none;" readonly="readonly">
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-sm-3 control-label">申请人&nbsp;&nbsp;&nbsp;&nbsp;</label>
								<div class="col-sm-7">
									<input type="text" id="chclerk" name="chclerk" placeholder="申请人"
										class="form-control" >
								</div>
							</div>
							
							
							<div class="form-group">
								<label class="col-sm-3 control-label">转移原因</label>
								<div class="col-sm-7">
									<input type="text" id="chreason" name="chreason" placeholder="转移原因"
										class="form-control" >
								</div>
							</div>
							
								<div class="form-group" >
								<label class="col-sm-3 control-label">是否同意</label>
								<div class="col-sm-7">
								<select class="form-control" id="chstatus" name="chstatus">
								<option value="-1" selected="selected">请选择</option>
								<option value="1">同意</option>
								<option value="2">不同意</option>
								</select>
								</div>
							</div>
					
					
							<div class="form-group">
								<label class="col-sm-3 control-label">转交对象</label>
								<div class="col-sm-7">
									<input type="text" id="chacceptor" name="chacceptor" placeholder="转交对象"
										class="form-control" >
								</div>
							</div>
							
					
							<div class="form-group">
									<label class="col-sm-3 control-label">详细意见</label>
									<div class="col-sm-7">
									<textarea class="form-control" rows="5"  id="chopinion" name="chopinion" placeholder="详细意见"></textarea>
									</div>
							</div>

							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8">
									<button class="btn  btn-primary" type="submit">&nbsp;&nbsp;提&nbsp;&nbsp;交&nbsp;&nbsp;</button>
									<button class="btn btn-danger " type="button" data-dismiss="modal">&nbsp;&nbsp;关&nbsp;&nbsp;闭&nbsp;&nbsp;</button>
								</div>
							</div>
						</form>
					</div>
								
							
						
					</div>
				</div>
			</div>
		</div>
	</div>
	

</body>

</html>
